<template>
  <div class="page">
    <splitpanes :horizontal="appStore.device === 'mobile'" class="default-theme">
      <pane size="16" style="overflow-y: auto">
        <el-tree
          class="custom-tree"
          :data="treeData"
          :props="defaultProps"
          :expand-on-click-node="false"
          default-expand-all
          highlight-current
          @node-click="handleNodeClick" />
      </pane>
      <pane size="84">
        <!-- 搜索区域 -->
        <!-- <el-input v-model="queryParams.keyword" placeholder="请输入关键词进行搜索" class="input-with-select">
      <template #append>
        <el-button type="primary" @click="handleQuery">搜索</el-button>
      </template>
    </el-input> -->
        <DynamicForm
          v-show="showSearch"
          ref="queryRef"
          v-model="queryParams"
          :config="formConfig"
          :items="formItems"
          :inline="true"
          :dict-data="{ caseStatus, case_source }"
          @submit="handleQuery"
          @reset="resetQuery">
          <template #dateRange="{ formData }">
            <el-date-picker
              v-model="queryParams.dateRange"
              value-format="YYYY-MM-DD"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 220px" />
          </template>
        </DynamicForm>
        <el-row :gutter="10" class="mb10">
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
        </el-row>
        <Table
          v-loading="loading"
          :data="tableData"
          :columns="newColumns"
          border
          :dictData="{ caseStatus, case_source, caseTypeList }">
          <template #index="{ $index }">
            {{ queryParams.pageNum * queryParams.pageSize - queryParams.pageSize + $index + 1 }}
          </template>
          <template #caseStatus="{ row }">
            <el-tag
              :type="
                row.status === '1'
                  ? 'info'
                  : row.status === '2'
                  ? 'primary'
                  : row.status === '3'
                  ? 'warning'
                  : row.status === '4'
                  ? 'success'
                  : row.status === '6'
                  ? 'danger'
                  : 'info'
              ">
              {{ caseStatus.find(item => item.value === row.status)?.label }}
            </el-tag>
          </template>
          <template #action="{ row }">
            <el-button link type="primary" @click="handleEdit(row)">查看</el-button>
          </template>
        </Table>
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList" />
      </pane>
    </splitpanes>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import DynamicForm from '@/components/DynamicForm/index.vue'
import Table from '@/components/Table'
import { useDeleteConfirm } from '@/hooks/useDeleteConfirm'
import { Splitpanes, Pane } from 'splitpanes'
import useAppStore from '@/store/modules/app'
import 'splitpanes/dist/splitpanes.css'
import { listRegistrationCase } from '@/api/caseSearch'
import { commontermsGet } from '@/api/filingReview/register.js'
import { pageConfig } from './config'
import useDictStore from '@/store/modules/dict'

const { confirmDeleteSingle } = useDeleteConfirm()
const { proxy } = getCurrentInstance()
const { case_source } = proxy.useDict('case_source')
const { caseStatus } = useDictStore()
const caseTypeList = [
  { value: '1', label: '简易案件' },
  { value: '2', label: '一般案件' },
  { value: '3', label: '重大案件' },
]

const router = useRouter()
const appStore = useAppStore()

const showSearch = ref(true)

const treeData = ref([
  {
    content: '案由',
    id: null,
    children: [],
  },
])
const defaultProps = {
  children: 'children',
  label: 'content',
}

const queryParams = ref({
  pageSize: 10,
  pageNum: 1,
  dateRange: null,
  caseCause: null,
  params: {
    beginCreateTime: undefined,
    endCreateTime: undefined,
  },
})
const { formConfig, formItems, columns, newColumns } = pageConfig()

// 获取树数据
const handleTreeData = async () => {
  const res: any = await commontermsGet({
    termType: 1,
    pageSize: 9999,
    pageNum: 1,
    status: 0,
  })
  console.log('案由', res)
  treeData.value[0].children = res.data
}
handleTreeData()
// 左侧树点击
const handleNodeClick = (node: any) => {
  queryParams.value.caseCause = node.content
  handleQuery()
}

// 查询
const handleQuery = () => {
  console.log('查询参数', queryParams.value)
  queryParams.value.pageNum = 1
  queryParams.value.pageSize = 10
  getList()
}

// 重置
const resetQuery = () => {
  queryParams.value.dateRange = null
  getList()
}

// 表格相关 start =============================================
// 获取列表
const getList = async () => {
  loading.value = true
  if (queryParams.value.dateRange && queryParams.value.dateRange.length) {
    queryParams.value.params.beginCreateTime = queryParams.value.dateRange[0]
    queryParams.value.params.endCreateTime = queryParams.value.dateRange[1]
  } else {
    queryParams.value.params.beginCreateTime = undefined
    queryParams.value.params.endCreateTime = undefined
  }
  const params = JSON.parse(JSON.stringify(queryParams.value))
  delete params.dateRange
  const res: any = await listRegistrationCase(params)
  if (res.code === 200) {
    tableData.value = res.rows
    total.value = res.total
  }
  loading.value = false
}
const tableData = ref([])
const loading = ref(false)
const total = ref(0)
// 查看
const handleEdit = (row: any) => {
  console.log('查看', row)
  router.push({
    path: '/caseSearchDetail',
    query: {
      id: row.id,
    },
  })
}

// 表格相关 end =============================================

onMounted(() => {
  getList()
})
</script>

<style scoped lang="scss">
.page {
  overflow-x: hidden;
  display: flex;
  gap: 20px;
  height: 100%;
}
.input-with-select {
  width: 60%;
  margin-left: 50%;
  transform: translate(-50%, 0);
  margin-bottom: 30px;
  margin-top: 10px;

  :deep(.el-input__wrapper) {
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    padding: 4px 8px;
    border-radius: 10px 0 0 10px;

    &:hover,
    &.is-focus {
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    }
  }

  :deep(.el-input__inner) {
    font-size: 15px;
    height: 42px;
    &::placeholder {
      font-size: 14px;
    }
  }

  :deep(.el-input-group__append) {
    background-color: var(--el-color-primary);
    border-color: var(--el-color-primary);
    border-radius: 0 10px 10px 0;
    .el-button {
      color: white;
      border: none;
      height: 100%;
      &:hover {
        background-color: var(--el-color-primary-light-3);
        opacity: 0.9;
      }
    }
  }
}
</style>
